<!--
 * @Author: CNN 969682281@qq.com
 * @Date: 2023-07-10 09:36:20
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2023-07-31 18:55:58
 * @FilePath: \newMould_BHZ\src\components\TensionAndGrout\TensionManage\TensionRealTime\TensioningCharts.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["commonData"],
  // props: ["temperatureX", "temperatureY"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      allData1: null,
      xDatas: null,
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.xDatas = newVal[0];
          this.allData = newVal[1];
          this.allData1 = newVal[2];
          setTimeout(() => {
            this.initChart();
            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
          }, 100);
        }
      },
      immediate: true,
    },
   
  },

  mounted() {
   
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      const payload = {
        id: "left-bottom-1",
        title: "油压1(Mpa)",
        title1: "油压2(Mpa)",
        wordNum: 3,
        data: {
          // y: ["60", "45", "70", "24", "66"],
          // y1: ["70", "35", "60", "34", "56"],
          y: this.allData,
          y1: this.allData1,
          // x: [
          //   "04-29 14:59",
          //   "04-29 15:59",
          //   "04-29 16:59",
          //   "04-29 17:59",
          //   "04-29 18:59",
          // ],
          x: this.xDatas,
          // total1: 197,
          // total2: 197,
        },
      };

      const data = payload.data.y;
      const data1 = payload.data.y1;
      const x = payload.data.x;

      var option = {
        grid: {
          left: 15,
          right: 15,
          bottom: 2,
          top: 45,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(9, 30, 60, 0.6)",
          extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
          borderWidth: 0,
          confine: false,
          appendToBody: true,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        legend: {
          width: window.innerWidth < 1600 ? "100%" : "60%",
          icon: "rect",
          top: 7,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: "rgba(23, 26, 29, 1)",
            fontSize: 14,
          },
          align: "left",
        },
        xAxis: {
          data: x,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              color: "rgba(126, 134, 142, 0.5)",
              width: 0.8,
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 0,
            color: "rgba(23, 26, 29, 1)",
            fontSize: 14,
          },
        },
        yAxis: [
          {
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255, 129, 109, 0.1)",
                width: 1, //这里是为了突出显示加上的
              },
            },
            axisLabel: {
              color: "rgba(23, 26, 29, 1)",
              fontSize: 14,
            },
            splitArea: {
              areaStyle: {
                color: "rgba(255,255,255,.5)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(126, 134, 142, 0.24)",
                type: "dotted",
              },
            },
          },
          {
            type: "value",
            nameTextStyle: {
              color: "rgba(185, 185, 185, 1)",
            },
            // max: 200,
            position: "left",

            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255, 129, 109, 0.1)",
                width: 1, //这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(126, 134, 142, 0.24)",
                type: "dotted",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} ", //右侧Y轴文字显示
              textStyle: {
                color: "rgba(23, 26, 29, 1)",
                fontSize: 14,
              },
            },
          },
        ],
        series: [
          {
            name: payload.title,
            type: "line",
            smooth: true,

            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            lineStyle: {
              color: "rgba(184, 143, 255, 1)",
              width: 2,
            },
            symbol: "circle", //小点形状
            symbolSize: 6,
            itemStyle: {
              // color: "rgba(184, 143, 255, 1)",//标题和小圆点为实心
              color: {
                //标题和小圆点为渐变
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(184, 143, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(184, 143, 255, 1)",
                  },
                ],
                global: false, //  缺省为  false
              },
            },
            z: 13,
            // areaStyle: {
            //   origin: 50,
            //   color: {
            //     type: "linear",
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [
            //       {
            //         offset: 0,
            //         color: "rgba(184, 143, 255,0.8)", // 0% 处的颜色
            //       },
            //       {
            //         offset: 1,
            //         color: "rgba(184, 143, 255,0)", //   100% 处的颜色
            //       },
            //     ],
            //     global: false, // 缺省为 false
            //   },
            // },

            data: data,
          },
          {
            name: payload.title1,
            type: "line",
            smooth: true,

            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            lineStyle: {
              // color: "rgba(184, 143, 100, 1)",
              color: "#73DDFF",
              width: 2,
            },
            symbol: "circle", //小点形状
            symbolSize: 6,
            itemStyle: {
              // color: "rgba(184, 143, 255, 1)",//标题和小圆点为实心
              color: {
                //标题和小圆点为渐变
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#73DDFF",
                  },
                  {
                    offset: 1,
                    color: "#73DDFF",
                  },
                ],
                global: false, //  缺省为  false
              },
            },
            z: 13,
            // areaStyle: {
            //   origin: 50,
            //   color: {
            //     type: "linear",
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [
            //       {
            //         offset: 0,
            //         color: "rgba(180, 140, 215,0.8)", // 0% 处的颜色
            //       },
            //       {
            //         offset: 1,
            //         color: "rgba(180, 140, 215,0)", //   100% 处的颜色
            //       },
            //     ],
            //     global: false, // 缺省为 false
            //   },
            // },

            data: data1,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },

    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;

      //   和分辨率大小相关的配置项
      const adapterOption = {
        legend: {
          textStyle: {
            fontSize: titleFontSize * 1.2,
          },
          itemWidth: titleFontSize * 1.2876,
          itemHeight: titleFontSize * 1.2876,
          itemGap: titleFontSize * 3,
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        series: [
          {
            barWidth: titleFontSize * 7, //柱子宽
          },
          // {
          //   barWidth: titleFontSize * 7, //柱子宽度
          // },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope></style>